<template>
  <div class="content" @click="openDetail">
    <div class="content-left">
      <img :src="task.img" alt="加载中……" />
    </div>

    <div class="content-right">
      <div class="content-right-one">
        <div class="name">{{ task.name }}</div>
        <div class="planB">{{ task.salary }}</div>
      </div>
      <div class="tag">{{ task.type }}</div>
      <div class="content-right-three">
        <div class="three-other">
          <div class="member">已参与X人</div>
          <hr />
          <div class="time">发布时间:{{ task.createtime }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { TaskInfo } from "@/api/task/type";
import { useRouter } from "vue-router";

const props = defineProps<{
  task: TaskInfo;
}>();

const router = useRouter();

const openDetail = () => {
  console.log(props.task.id);
  const url = router.resolve({
    name: "Detail",
    params: {
      id: props.task.id
    }
  });
  window.open(url.href);
};
</script>

<style lang="less" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  padding-right: 20px;
  box-sizing: border-box;
  background-color: white;
  cursor: pointer;
  &-left {
    width: 100px;
    height: 100px;
    margin: 15px;
    background-color: aqua;
    img {
      width: 100%;
      height: 100%;
    }
  }
  &-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: auto 0;
    background-color: beige;
    height: 100px;
    &-one {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    &-three {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
  }
}

.name {
  font-size: 26px;
  font-weight: 400;
}
.planB {
  font-size: 26px;
  font-weight: 200;
  color: red;
  &::before {
    content: "￥";
  }
}
.tag {
  width: 40px;
  padding: 5px;
  font-size: 16px;
  font-weight: 400;
  background-color: aliceblue;
}
.three-other {
  display: flex;
  flex-direction: row;
  color: grey;
}
</style>
